<template>
  <a-drawer :width="600" v-model:open="visible" title="节点碳排数据录入" destroyOnClose>
    <a-form ref="enterFormRef" :model="enterFormState"  layout="vertical">
      <a-form-item label="工艺名称" name="ProcessStepID">{{ enterFormState.ProcessStepID }} </a-form-item>
      <a-form-item label="时间选择" name="Timestamp">
        <a-date-picker :show-time="{ format: 'HH:mm' }" style="width: 100%" v-model="enterFormState.Timestamp" />
      </a-form-item>
      <a-form-item label="使用能源" name="EnergyConsumption">
        <a-input v-model:value="enterFormState.EnergyConsumption" placeholder="请输入" />
        <div class="unit">kg</div>
      </a-form-item>
      <a-form-item label="原材料" name="RawMaterialConsumption">
        <a-input v-model:value="enterFormState.RawMaterialConsumption" placeholder="请输入" />
        <div class="unit">kg</div>
      </a-form-item>
      <a-form-item label="原辅料" name="AuxiliaryMaterialConsumption">
        <a-input v-model:value="enterFormState.AuxiliaryMaterialConsumption" placeholder="请输入" />
        <div class="unit">kg</div>
      </a-form-item>
      <a-form-item label="包装物" name="PackagingConsumption">
        <a-input v-model:value="enterFormState.PackagingConsumption" placeholder="请输入" />
        <div class="unit">kg</div>
      </a-form-item>
      <a-form-item label="备注" name="Remarks">
        <a-input v-model:value="enterFormState.Remarks" placeholder="请输入" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script setup lang="ts">
  import message from 'ant-design-vue/lib/message';
  import { reactive, ref } from 'vue';
  defineExpose({
    showModal,
  });
  const props = defineProps({
    ProcessStepID: String,
    treeData: Array,
  });
  const emits = defineEmits(['refresh']);
  const defaultEnterForm = {
    id: undefined,
    ProcessStepID: undefined,
    StepName: undefined,
    Timestamp: undefined,
    EnergyConsumption: undefined,
    RawMaterialConsumption: undefined,
    AuxiliaryMaterialConsumption: undefined,
    PackagingConsumption: undefined,
    Remarks: undefined,
  };

  let enterFormState = reactive({
    ...defaultEnterForm,
  });

  const visible = ref(false);
  function showModal(data) {
    visible.value = true;
    enterFormState.ProcessStepID = props.ProcessStepID[0];
  }
  const formRef = ref();

  const options = reactive([
    {
      value: 'a1',
      label: 'a1',
    },
    {
      value: 'a2',
      label: 'a2',
    },
  ]);
</script>
<style lang="less" scoped>
  :deep(.ant-form-item-control-input-content) {
    display: flex;
  }
  .unit {
    display: flex;
    align-items: center;
    margin: 0 0 0 10px;
  }
</style>
